<script>
// 应收应付冲销模态表单页
Vue.component('future-form', {
    template: `
<el-dialog title="新增冲销条目" :visible.sync="dialogShow" :close-on-click-modal="false" width="800px" @close="closeModal">
    <el-row>
    <el-alert type="info" :closable="false"  show-icon v-if="tallyRecordEditForm['arapInfo']">
        <p slot="title">
        预收/付总金额：{{tallyRecordEditForm['arapInfo']['amount']}}
        冲销余额：{{tallyRecordEditForm['arapInfo']['amount_remain']}}
        本次冲销：{{tallyRecordEditForm['amount']}}</p>
    </el-alert>
    <div style="height: 10px"></div>
        <el-form :inline="true" :model="tallyRecordEditForm" :rules="tallyFormRules" class="form-inline recordForm">
            <el-row>
            <el-col :span="12">
                    <el-form-item label="类型" prop="type">
                        <el-input placeholder="0.00" :disabled="true" :value="getTypeTxt(tallyRecordEditForm.type)"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item v-if="tallyRecordEditForm.type == 10" label="分类">
                        <el-select :disabled="true" placeholder="分类" clearable filterable default-first-option v-model="tallyRecordEditForm.category_id" filterable>
                            <el-option-group
                                    v-for="cate in categoryListIn"
                                    :key="cate.title"
                                    :label="cate.title">
                                <el-option
                                        v-for="item in cate.children"
                                        :key="item.id"
                                        :label="item.title"
                                        :value="item.id">
                                </el-option>
                            </el-option-group>
                        </el-select>
                    </el-form-item>
                    <el-form-item v-if="tallyRecordEditForm.type == 20" label="分类">
                        <el-select :disabled="tallyRecordEditForm.category_id==99?true:false" placeholder="分类" clearable filterable default-first-option v-model="tallyRecordEditForm.category_id" filterable>
                            <el-option-group
                                    v-for="cate in categoryListOut"
                                    :key="cate.title"
                                    :label="cate.title">
                                <el-option
                                        v-for="item in cate.children"
                                        :key="item.id"
                                        :label="item.title"
                                        :value="item.id">
                                </el-option>
                            </el-option-group>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="冲销金额" prop="amount">
                        <el-input placeholder="0.00" v-model="tallyRecordEditForm.amount"> <template slot="append">元</template></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item prop="account_id">
                        <span slot="label">{{ tallyRecordEditForm.type == 30 ? "转出":"账户" }}</span>
                        <el-select disabled placeholder="冲销账户" clearable filterable default-first-option v-model="tallyRecordEditForm.account_id">
                            <el-option
                                    v-for="item in accountList"
                                    :key="item.id"
                                    :label="item.title"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item prop="account_dst_id" v-if="tallyRecordEditForm.type == 30">
                        <span slot="label">转入</span>
                        <el-select placeholder="转入账户" clearable filterable default-first-option v-model="tallyRecordEditForm.account_dst_id">
                            <el-option
                                    v-for="item in accountList"
                                    :key="item.id"
                                    :label="item.title"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item v-if="tallyRecordEditForm.type == 10" label="客户">
                        <el-select  placeholder="客户" :disabled="true" clearable filterable default-first-option v-model="tallyRecordEditForm.store_id">
                            <el-option
                                    v-for="item in customList"
                                    :key="item.id"
                                    :label="item.title"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item v-if="tallyRecordEditForm.type == 20" label="供应商">
                        <el-select  placeholder="供应商" :disabled="true" clearable filterable default-first-option v-model="tallyRecordEditForm.store_id">
                            <el-option
                                    v-for="item in gysList"
                                    :key="item.id"
                                    :label="item.title"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="员工">
                        <el-select  placeholder="员工" clearable filterable default-first-option v-model="tallyRecordEditForm.member_id" no-data-text="其他">
                            <el-option
                                    v-for="item in memberList"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="项目">
                        <el-select  placeholder="项目" clearable filterable default-first-option v-model="tallyRecordEditForm.project_id">
                            <el-option
                                    v-for="item in projectList"
                                    :key="item.id"
                                    :label="item.title"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="时间" style="margin-right:0;">
                        <el-date-picker disabled class="datePicker" v-model="tallyRecordEditForm.dateR" placeholder="选择日期" value-format="yyyy-MM-dd"></el-date-picker>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="备注">
                        <el-input placeholder="备注" class="tallyMemoInput" v-model="tallyRecordEditForm.memo"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                <p style="margin-bottom: 10px;">
                    <el-link :underline="false" type="info"  @click="showImgUploadBox = !showImgUploadBox"><i class="el-icon-paperclip"></i>&nbsp;添加图片或附件 <i class="el-icon-arrow-down"></i></el-link>
                    <el-upload v-if="showImgUploadBox" accept="image/jpeg,image/gif,image/png,application/vnd.ms-excel,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/zip,application/rar,application/pdf" action="/api/upload/file" :headers="upHeaders"
                               :before-upload="recordFormFileBeforeUpload"
                               :file-list="recordFormEditFileList"
                               :on-success="recordFormEditFileUploadSuccess"
                               :on-remove="recordFormEditFileRemove"
                               list-type="picture-card" :limit="3">
                        <i class="el-icon-plus"></i>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible">
                        <img width="100%" :src="dialogImageUrl" alt="">
                    </el-dialog>
                </p>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <p style="text-align:center;margin-bottom: 20px;">
                        <el-button type="success" @click="handleRecordAddForm"><i class="el-icon-upload"></i> 保 存</el-button>
                        <el-button @click="closeModal">取 消</el-button>
                    </p>
                </el-col>
            </el-row>
        </el-form>
    </el-row>
</el-dialog>
    `,
    props: ['dialog-show','form-row'],
    computed: {
        currentTallyId() {
            return this.$store.state.currentTallyId
        },
        currentTally () {
            return this.$store.state.currentTally
        },
        customList () {
            return this.$store.state.customList
        },
        gysList () {
            return this.$store.state.gysList
        },
        categoryListIn() {
            return this.$store.state.categoryListIn
        },
        categoryListOut() {
            return this.$store.state.categoryListOut
        },
        accountList() {
            return this.$store.state.accountList
        },
        projectList() {
            return this.$store.state.projectList
        },
        memberList() {
            return this.$store.state.memberList
        }
    },
    watch: {
        dialogShow:{
            handler (newVal) {},
            deep:true,
            immediate: true
        },
        formRow: {
            handler (newVal) {

                console.log("=======>newvalue")
                console.log("=======>newvalue")
                console.log(newVal)
                console.log("=======>newvalue")
                console.log("=======>newvalue")
                this.tallyRecordEditForm = newVal
            },
            deep:true,
            immediate: true
        }
    },
    data:function(){
        return {
            showImgUploadBox:true,
            upHeaders:{
                token:loginToken
            },
            dialogVisible: false,
            dialogImageUrl: '',
            recordFormFileList: [],
            recordFormEditFileList: [],
            tallyRecordEditForm:{},
            tallyFormRules: {
                amount: [
                    { required: true, message: '请输入金额', trigger: 'blur' }
                ],
                account_id: [
                    { required: true, message: '请选择账户', trigger: 'blur' }
                ],
                account_dst_id: [
                    { required: true, message: '请选择转入账户', trigger: 'blur' }
                ],
                category_id: [
                    { required: true, message: '请选择类别', trigger: 'blur' }
                ],
            },
        }
    },
    methods:{
        closeModal(){
            this.$emit('modalClose')
        },
        recordFormFileBeforeUpload(file){
            console.log(file)
        },
        getTypeTxt(type) {
            if(type === 10) return '收入'
            if(type === 20) return '支出'
            if(type === 30) return '转账'
        },
        recordFormFileUploadSuccess(response, file, fileList){
            if(response.status === 'success') {
                file.url = response.data.url
                this.recordFormFileList.push(file)
            }else{
                this.recordFormFileList.pop()
                this.$message({
                    type: 'error',
                    message: '上传失败:'+response.error_message
                })
            }
        },
        recordFormEditFileUploadSuccess(response, file, fileList){
            if(response.status === 'success') {
                file.url = response.data.url
                this.recordFormEditFileList.push(file)
            }else{
                this.recordFormEditFileList.pop()
                this.$message({
                    type: 'error',
                    message: '上传失败:'+response.error_message
                })
            }
        },
        recordFormFileRemove(file, fileList){
            this.recordFormFileList = fileList
        },
        recordFormEditFileRemove(file, fileList){
            this.recordFormEditFileList = fileList
        },
        handleRecordAddForm(){
            let that = this
            if(that.tallyRecordEditForm['amount'] <= 0) {
                that.$message({
                    type: 'error',
                    message: '冲销金额不能为 0'
                })
                return false
            }
            if(parseFloat(that.tallyRecordEditForm['amount']) > parseFloat(that.tallyRecordEditForm['arapInfo']['amount_remain'])) {
                that.$message({
                    type: 'error',
                    message: '超出本次最大冲销金额:' + that.tallyRecordEditForm['arapInfo']['amount_remain']
                })
                that.tallyRecordEditForm['amount'] = that.tallyRecordEditForm['arapInfo']['amount_remain']
                return false
            }
            let postUrl = '/api/tally-future/add-log'
            let postData = JSON.parse(JSON.stringify(that.tallyRecordEditForm))
            let attachment = []
            that.recordFormEditFileList.forEach(v=>{
                attachment.push(v.url)
            });
            postData.tally_id = that.currentTallyId // 当前账本ID
            postData.is_yushou = 1 // 当前账本ID
            postData.tally_time = postData.dateR + ' ' + postData.timeR


            postData.attachment = attachment.join(',')
            axios.post(postUrl,postData,{
                headers: {'token': loginToken},
            }).then(function(res) {
                if(res.data.status === 'success'){
                    that.$message({
                        type: 'success',
                        message: '操作成功~'
                    });
                    that.recordFormEditFileList=[]
                    that.tallyRecordEditForm = {}
                    that.$emit('getRecordList')
                    that.$emit('modalClose')
                }else{
                    that.$message({
                        type: 'error',
                        message: '解析数据失败:'+res.data.error_message
                    })
                }
            })
        },
    }
})
</script>
